<template>
  <div class="menu-container">
    <div class="item-wrap">
      <div @click="handleBtn(1)" class="item">
        <img src="@img/scjj/scjj-01.svg" />
      </div>
      <div @click="handleBtn(2)" class="item">
        <img src="@img/scjj/scjj-02.svg" />
      </div>
      <div @click="handleBtn(3)" class="item">
        <img src="@img/scjj/scjj-03.svg" />
      </div>
      <div @click="handleBtn(4)" class="item">
        <img src="@img/scjj/scjj-04.svg" />
      </div>
      <div @click="handleBtn(5)" class="item">
        <img src="@img/scjj/scjj-05.svg" />
      </div>
      <div @click="handleBtn(6)" class="item">
        <img src="@img/scjj/scjj-06.svg" />
      </div>
      <div @click="handleBtn(7)" class="item">
        <img src="@img/scjj/scjj-07.svg" />
      </div>
      <div @click="handleBtn(8)" class="item">
        <img src="@img/scjj/scjj-08.svg" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const handleBtn = (e) => {
  if (e == 1) {
    router.push({ path: "/subjectInfo" });
  } else if (e == 2) {
    router.push({ path: "/integrity" });
  } else if (e == 3) {
    router.push({ path: "/shopQuery" });
  } else if (e == 4) {
    router.push({ path: "/pricesManager" });
  } else if (e == 5) {
    router.push({ path: "/trad" });
  } else if (e == 6) {
    router.push({ path: "/knowledge" });
  } else if (e == 7) {
    router.push({ path: "/detection" });
  } else {
    router.push({ path: "/complain" });
  }
};
</script>

<style lang="scss" scoped>
.menu-container {
  padding: 10px 0;
  height: 158px;
}
::v-deep.item-wrap {
  height: 100%;
  display: grid;
  grid-row-gap: 2px;
  justify-content: space-around;
  align-content: center;
  grid-template-columns: repeat(auto-fill, 110px);
  .van-row {
    height: 100%;
    .div {
      // width: 120px;
      // height: 79px;
      img {
        width: 110px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
